<template>
  <div class="data-demo-container">
    <!-- 顶部装饰 -->
    <decoration type="flow" :height="30" style="width: 100%" />

    <!-- 页面标题 -->
    <div class="page-header">
      <title-box :height="60" :decoration-width="150">
        HarryData 组件库展示
      </title-box>
    </div>

    <!-- 统计卡片区域 -->
    <section class="demo-section">
      <h2 class="section-title">📊 统计卡片 (StatCard)</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <stat-card
            title="总用户数"
            :value="userCount"
            variant="primary"
          >
            <template #icon>
              <el-icon><User /></el-icon>
            </template>
          </stat-card>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <stat-card
            title="在线设备"
            :value="onlineDevices"
            variant="success"
          >
            <template #icon>
              <el-icon><Monitor /></el-icon>
            </template>
          </stat-card>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <stat-card
            title="今日订单"
            :value="todayOrders"
            variant="warning"
          >
            <template #icon>
              <el-icon><ShoppingCart /></el-icon>
            </template>
          </stat-card>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <stat-card
            title="营业额"
            :value="revenue"
            prefix="¥"
            variant="danger"
          >
            <template #icon>
              <el-icon><Money /></el-icon>
            </template>
          </stat-card>
        </el-col>
      </el-row>
    </section>

    <!-- 边框组件展示 -->
    <section class="demo-section">
      <h2 class="section-title">🎨 边框组件 (BorderBox)</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :md="8">
          <border-box type="default" variant="primary" style="height: 200px">
            <div class="border-content">
              <h3>Default 样式</h3>
              <p>扫描线 + 网格背景</p>
              <p>双层角落装饰</p>
            </div>
          </border-box>
        </el-col>

        <el-col :xs="24" :md="8">
          <border-box type="gradient" style="height: 200px">
            <div class="border-content">
              <h3>Gradient 样式</h3>
              <p>渐变色角落</p>
              <p>呼吸圆点 + 发光效果</p>
            </div>
          </border-box>
        </el-col>

        <el-col :xs="24" :md="8">
          <border-box type="scan" :corner-size="25" style="height: 200px">
            <div class="border-content">
              <h3>Scan 样式</h3>
              <p>水平扫描线</p>
              <p>角落发光 + 动态圆点</p>
            </div>
          </border-box>
        </el-col>
      </el-row>

      <!-- 不同颜色变体 -->
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :xs="24" :sm="12" :md="6">
          <border-box type="default" variant="primary" style="height: 150px">
            <div class="border-content">
              <h4>Primary</h4>
            </div>
          </border-box>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <border-box type="default" variant="success" style="height: 150px">
            <div class="border-content">
              <h4>Success</h4>
            </div>
          </border-box>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <border-box type="default" variant="warning" style="height: 150px">
            <div class="border-content">
              <h4>Warning</h4>
            </div>
          </border-box>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <border-box type="default" variant="danger" style="height: 150px">
            <div class="border-content">
              <h4>Danger</h4>
            </div>
          </border-box>
        </el-col>
      </el-row>
    </section>

    <!-- 装饰组件展示 -->
    <section class="demo-section">
      <h2 class="section-title">🎭 装饰组件 (Decoration)</h2>
      <div class="decoration-showcase">
        <div class="decoration-item">
          <p class="decoration-label">Flow 流动线</p>
          <decoration type="flow" :height="30" style="width: 100%" />
        </div>

        <div class="decoration-item">
          <p class="decoration-label">Polyline 折线装饰</p>
          <decoration type="polyline" :width="200" :height="5" />
        </div>

        <div class="decoration-item">
          <p class="decoration-label">Line 简单线条</p>
          <decoration type="line" :width="300" :height="30" />
        </div>

        <div class="decoration-item">
          <p class="decoration-label">Wave 波浪线</p>
          <decoration type="wave" :width="300" :height="40" />
        </div>

        <div class="decoration-item">
          <p class="decoration-label">Corner 角落装饰</p>
          <decoration type="corner" :width="50" :height="50" />
        </div>

        <div class="decoration-item">
          <p class="decoration-label">Rect 矩形装饰</p>
          <decoration type="rect" :width="80" :height="60" />
        </div>
      </div>
    </section>

    <!-- 数据展示组件 -->
    <section class="demo-section">
      <h2 class="section-title">📈 数据展示组件</h2>
      <el-row :gutter="20">
        <!-- 数字翻牌器 -->
        <el-col :xs="24" :md="8">
          <border-box type="gradient" style="height: 250px">
            <div class="component-demo">
              <h3>DigitalFlop 数字翻牌器</h3>
              <div class="digital-group">
                <digital-flop :value="12345" />
                <digital-flop :value="9999" prefix="¥" suffix="元" />
                <digital-flop :value="88.88" :decimals="2" color="#00d4ff" />
              </div>
              <el-button @click="randomizeNumbers" size="small" style="margin-top: 10px">
                随机更新数字
              </el-button>
            </div>
          </border-box>
        </el-col>

        <!-- 进度条 -->
        <el-col :xs="24" :md="8">
          <border-box type="scan" style="height: 250px">
            <div class="component-demo">
              <h3>ProgressBar 进度条</h3>
              <div class="progress-group">
                <div class="progress-item">
                  <span>任务完成度</span>
                  <progress-bar :value="progress1" />
                </div>
                <div class="progress-item">
                  <span>系统负载</span>
                  <progress-bar :value="progress2" color="#67c23a" />
                </div>
                <div class="progress-item">
                  <span>存储使用</span>
                  <progress-bar :value="progress3" color="#e6a23c" :height="24" />
                </div>
              </div>
            </div>
          </border-box>
        </el-col>

        <!-- 滚动表格 -->
        <el-col :xs="24" :md="8">
          <border-box type="default" variant="primary" style="height: 250px">
            <div class="component-demo">
              <h3>ScrollBoard 滚动表格</h3>
              <scroll-board 
                :data="tableData" 
                :header="tableHeader"
                :row-num="5"
              />
            </div>
          </border-box>
        </el-col>
      </el-row>
    </section>

    <!-- 图表组件 -->
    <section class="demo-section">
      <h2 class="section-title">📊 图表组件</h2>
      <el-row :gutter="20">
        <!-- 水球图 -->
        <el-col :xs="24" :sm="12" :md="8">
          <border-box type="gradient" style="height: 300px">
            <div class="chart-demo">
              <h3>WaterPolo 水球图</h3>
              <div class="chart-container">
                <water-polo :value="waterValue" :size="150" color="#00d4ff" />
              </div>
              <el-slider v-model="waterValue" :min="0" :max="100" style="margin-top: 20px" />
            </div>
          </border-box>
        </el-col>

        <!-- 活跃环形图 -->
        <el-col :xs="24" :sm="12" :md="8">
          <border-box type="scan" style="height: 300px">
            <div class="chart-demo">
              <h3>ActiveRingChart 环形图</h3>
              <div class="chart-container">
                <active-ring-chart 
                  :value="ringActive" 
                  :radius="80" 
                  title="活跃度"
                />
              </div>
              <el-slider v-model="ringActive" :min="0" :max="100" style="margin-top: 20px" />
            </div>
          </border-box>
        </el-col>

        <!-- 胶囊图 -->
        <el-col :xs="24" :sm="12" :md="8">
          <border-box type="default" variant="success" style="height: 300px">
            <div class="chart-demo">
              <h3>CapsuleChart 胶囊图</h3>
              <div class="chart-container">
                <capsule-chart :data="capsuleData" :height="200" />
              </div>
            </div>
          </border-box>
        </el-col>

        <!-- 锥形图 -->
        <el-col :xs="24" :sm="12" :md="8">
          <border-box type="gradient" style="height: 300px">
            <div class="chart-demo">
              <h3>ConicalChart 锥形图</h3>
              <div class="chart-container">
                <conical-chart :value="conicalValue" :size="180" title="转化率" />
              </div>
              <el-slider v-model="conicalValue" :min="0" :max="100" style="margin-top: 20px" />
            </div>
          </border-box>
        </el-col>

        <!-- 飞线图 -->
        <el-col :xs="24" :sm="12" :md="8">
          <border-box type="scan" style="height: 300px">
            <div class="chart-demo">
              <h3>FlylineChart 飞线图</h3>
              <div class="chart-container">
                <flyline-chart 
                  :data="flylineData" 
                  :width="300" 
                  :height="220" 
                />
              </div>
            </div>
          </border-box>
        </el-col>

        <!-- 组合展示 -->
        <el-col :xs="24" :sm="12" :md="8">
          <border-box type="default" variant="warning" style="height: 300px">
            <div class="chart-demo">
              <h3>组合展示</h3>
              <div class="combined-demo">
                <title-box :height="40" :decoration-width="80">
                  实时数据
                </title-box>
                <div style="margin-top: 20px">
                  <digital-flop :value="combinedValue" prefix="当前: " />
                </div>
                <div style="margin-top: 20px">
                  <progress-bar :value="combinedValue" color="#ffaa00" />
                </div>
                <decoration type="polyline" :width="150" :height="5" style="margin-top: 20px" />
              </div>
            </div>
          </border-box>
        </el-col>
      </el-row>
    </section>

    <!-- 底部装饰 -->
    <decoration type="flow" :height="30" style="width: 100%; margin-top: 40px" />

    <!-- 控制面板 -->
    <!-- <div class="control-panel">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>🎮 控制面板</span>
          </div>
        </template>
        <el-space direction="vertical" style="width: 100%">
          <el-button @click="startAnimation" type="primary">启动所有动画</el-button>
          <el-button @click="randomizeAll" type="success">随机更新数据</el-button>
          <el-button @click="resetAll" type="warning">重置所有数据</el-button>
        </el-space>
      </el-card>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  BorderBox,
  Decoration,
  DigitalFlop,
  StatCard,
  TitleBox,
  ProgressBar,
  WaterPolo,
  ScrollBoard,
  ActiveRingChart,
  FlylineChart,
  CapsuleChart,
  ConicalChart
} from '@/components/HarryData'
import {
  User,
  Monitor,
  ShoppingCart,
  Money
} from '@element-plus/icons-vue'

// 统计卡片数据
const userCount = ref(12580)
const onlineDevices = ref(1180)
const todayOrders = ref(356)
const revenue = ref(88888)

// 数字翻牌器数据
const digitalValue1 = ref(12345)
const digitalValue2 = ref(9999)
const digitalValue3 = ref(88.88)

// 进度条数据
const progress1 = ref(75)
const progress2 = ref(60)
const progress3 = ref(85)

// 滚动表格数据
const tableHeader = ['排名', '设备名称', '状态', '数值']
const tableData = ref([
  ['1', '设备-001', '正常', '98%'],
  ['2', '设备-002', '正常', '95%'],
  ['3', '设备-003', '警告', '78%'],
  ['4', '设备-004', '正常', '92%'],
  ['5', '设备-005', '正常', '88%'],
  ['6', '设备-006', '正常', '96%'],
  ['7', '设备-007', '故障', '45%'],
  ['8', '设备-008', '正常', '91%'],
])

// 水球图数据
const waterValue = ref(75)

// 环形图数据
const ringActive = ref(68)

// 胶囊图数据
const capsuleData = ref([
  { name: '产品A', value: 85 },
  { name: '产品B', value: 70 },
  { name: '产品C', value: 60 },
  { name: '产品D', value: 45 }
])

// 锥形图数据
const conicalValue = ref(72)

// 飞线图数据
const flylineData = ref([
  { from: [50, 50], to: [250, 150] },
  { from: [100, 150], to: [200, 50] },
  { from: [150, 100], to: [250, 100] }
])

// 组合展示数据
const combinedValue = ref(66)

// 随机更新数字
const randomizeNumbers = () => {
  digitalValue1.value = Math.floor(Math.random() * 99999)
  digitalValue2.value = Math.floor(Math.random() * 9999)
  digitalValue3.value = Math.floor(Math.random() * 100 * 100) / 100
}

// 随机更新所有数据
const randomizeAll = () => {
  userCount.value = Math.floor(Math.random() * 20000) + 10000
  onlineDevices.value = Math.floor(Math.random() * 2000) + 1000
  todayOrders.value = Math.floor(Math.random() * 500) + 200
  revenue.value = Math.floor(Math.random() * 100000) + 50000

  progress1.value = Math.floor(Math.random() * 100)
  progress2.value = Math.floor(Math.random() * 100)
  progress3.value = Math.floor(Math.random() * 100)

  waterValue.value = Math.floor(Math.random() * 100)
  ringActive.value = Math.floor(Math.random() * 100)
  conicalValue.value = Math.floor(Math.random() * 100)
  combinedValue.value = Math.floor(Math.random() * 100)

  randomizeNumbers()
}

// 重置所有数据
const resetAll = () => {
  userCount.value = 12580
  onlineDevices.value = 1180
  todayOrders.value = 356
  revenue.value = 88888

  progress1.value = 75
  progress2.value = 60
  progress3.value = 85

  waterValue.value = 75
  ringActive.value = 68
  conicalValue.value = 72
  combinedValue.value = 66
}

// 启动动画
const startAnimation = () => {
  let count = 0
  const interval = setInterval(() => {
    randomizeAll()
    count++
    if (count >= 3) {
      clearInterval(interval)
    }
  }, 2000)
}

// 自动更新数据
onMounted(() => {
  setInterval(() => {
    combinedValue.value = Math.floor(Math.random() * 100)
  }, 3000)
})
</script>

<style lang="scss" scoped>
.data-demo-container {
  padding: 20px;
  min-height: 100vh;
  background: var(--el-bg-color);
}

.page-header {
  margin-bottom: 30px;
  text-align: center;
}

.demo-section {
  margin-bottom: 40px;

  .section-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--el-text-color-primary);
    padding-left: 10px;
    border-left: 4px solid var(--el-color-primary);
  }
}

.border-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 20px;

  h3, h4 {
    margin: 10px 0;
    color: var(--el-text-color-primary);
  }

  p {
    margin: 5px 0;
    color: var(--el-text-color-secondary);
    font-size: 14px;
  }
}

.decoration-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 20px;
  background: var(--el-fill-color-light);
  border-radius: 8px;

  .decoration-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    .decoration-label {
      font-size: 14px;
      color: var(--el-text-color-regular);
      margin: 0;
    }
  }
}

.component-demo {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;

  h3 {
    margin: 0 0 20px 0;
    text-align: center;
    color: var(--el-text-color-primary);
    font-size: 16px;
  }

  .digital-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    flex: 1;
    justify-content: center;
  }

  .progress-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    justify-content: center;

    .progress-item {
      span {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: var(--el-text-color-regular);
      }
    }
  }
}

.chart-demo {
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;

  h3 {
    margin: 0 0 15px 0;
    text-align: center;
    color: var(--el-text-color-primary);
    font-size: 16px;
  }

  .chart-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .combined-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
}

.control-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;

  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
  }
}

// 暗黑主题适配
.dark {
  .data-demo-container {
    background: #0a1929;
  }

  .decoration-showcase {
    background: rgba(0, 212, 255, 0.05);
  }
}

// 响应式适配
@media (max-width: 768px) {
  .data-demo-container {
    padding: 10px;
  }

  .demo-section {
    margin-bottom: 30px;

    .section-title {
      font-size: 20px;
    }
  }

  .control-panel {
    bottom: 10px;
    right: 10px;
  }
}
</style>
